import React from 'react'
import {Row, Col} from 'antd'
import PCHeader from './pc_header'
import PCFooter from './pc_footer'
import {
    Menu,
    Icon,
    Tabs,
    message,
    Form,
    Input,
    Button,
    Checkbox,
    Modal,
    Upload
} from 'antd'
const FormItem = Form.Item
const TabPane = Tabs.TabPane
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
import {Router, Route, Link, browserHistory} from 'react-router'

export default class PCUserCenter extends React.Component {
    constructor() {
        super()
        this.state = {
            previewImage: '',
            previewVisible: false,
            fileList:[]
        }
    }
    handleCancel() {
        this.setState({previewVisible: false})
    }
    render() {
        
         const fileList=this.state.fileList.length
         const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const setting = {
            action:"//jsonplaceholder.typicode.com/posts/",
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            listType: 'picture-card',
            defaultFileList: [
                {
                    uid: -1,
                    name: 'xxx.png',
                    state: 'done',
                    url: 'http://s10.sinaimg.cn/mw690/001mOomizy6S47QlDW969.jpg',
                    thumbUrl: 'http://s10.sinaimg.cn/mw690/001mOomizy6S47QlDW969.jpg'
                }
            ],
            onPreview: (file) => {
                this.setState({
                    previewImage: file.url || file.thumbUrl,
                    previewVisible: true
                })
            }
        }
        return (
            <div>
                <PCHeader current={'guonei'}/>
                <Row>
                    <Col span={2}> {this.state.fileList}</Col>
                    <Col span={20}>
                        <Tabs>
                            <TabPane tab="我的收藏列表" key="1"></TabPane>
                            <TabPane tab="我的评论列表" key="2">

                            </TabPane>
                            <TabPane tab="头像设置" key="3">
                                <div className="clearfix">
                                    <Upload {...setting}>
                                        {fileList >= 3 ? null : uploadButton}
                                        <Modal
                                            visible={this.state.previewVisible}
                                            footer={null}
                                            onCancel={this.handleCancel.bind(this)}>
                                            <img src={this.state.previewImage} style={{ width: '100%' }} alt="预览"/>
                                        </Modal>
                                      
                                    </Upload>
                                </div>
                            </TabPane>
                        </Tabs>
                    </Col>
                    <Col span={2}></Col>
                </Row>

                <PCFooter/>
            </div>
        )
    }
}